<template>
	<div class="zhengti">
		    <div class="closes btn-close iconfont icon-back" @click="back()"></div>
			<div class="subtitle" style="width:400px;height:80px; margin-left:170px;margin-top:50px;"></div>
			<div class="lottery-box" style="margin-top:350px;">
				<div class="lottery" style="width:550px;height:550px;">
					<div class="lottery-item">
						<div class="lottery-start">
							<div class="box" @click="startLottery">
								<p>立即抽奖</p>
							</div>
						</div>
						<ul>
							<li v-for="(item,i) in list" :class="i == index ? 'on' : '' " :key="item.title">
							<div class="box">
								<image :src="item.img" class="images"/>
							</div>
							</li>
						</ul>
					</div>
				</div>  
			<!-- 中奖弹窗 -->
				<div class="mask" v-if="showToast"></div>
				<div class="lottery-alert" v-if="showToast">
					<h1>恭喜您</h1>
					<image :src="list[index].img" class="print"/>
					<h2>获得{{list[index].title}}</h2>
					<div class="btnsave" @click="draw()">确定</div> 
				</div>  
			</div>
	</div>
</template>
<style scoped lang="css">
     @import '../../assets/styles/lottery.css'; /*引入公共样式*/
</style>
<style scoped>
.lottery .lottery-item ul li .box {
    height: 120px;
    position: relative;
    text-align: center;
    overflow: hidden;
    background:#FED142FF;
    background-size: 100% 100%;
    border-radius:5px;
}
.lottery .lottery-item ul li {
    width: 150px;
    position: absolute;
    padding-right: 10px;
}
.lottery .lottery-item ul li:nth-child(2) {
    left: 150px;
}
.lottery .lottery-item ul li:nth-child(3) {
    left: 300px;
}
.lottery .lottery-item ul li:nth-child(4) {
    left: 300px;
    top: 150px;
}
.lottery .lottery-item ul li:nth-child(5) {
    left: 300px;
    top: 300px;
}
.lottery .lottery-item ul li:nth-child(6) {
    left: 150px;
    top: 300px;
}
.lottery .lottery-item ul li:nth-child(7) {
    left: 0;
    top: 300px;
}
.lottery .lottery-item ul li:nth-child(8) {
    left: 0;
    top: 150px;
}
.lottery .lottery-item {
    height: 220px;
    position: relative;
    margin-top: 10px;
    margin-left: 10px;
}

.lottery .lottery-item .lottery-start .box {
	height: 130px;
    cursor: pointer;
	overflow: hidden;
    background: url(/src/assets/img/bg1.png) no-repeat center;
    background-size: 100% 100%;
}
.lottery .lottery-item .lottery-start .box p {
    font-size: 14px;
	margin-top: 35px;
    margin-bottom: 5px;
    line-height: 45px;
    text-align: center;
    display: block;
    font-weight:bold;
    -webkit-text-stroke: 0.5px #fff; 
    color:#FF7725FF;
}
.lottery .lottery-item .lottery-start {
    position: absolute;
    left: 150px;
    width: 150px;
    top: 150px;
    padding-right: 10px;
}
</style>
<style scoped>
    .closes{
	  color:#FFF;
	  width:100px;
	  height:100px;
	  text-align: center;
	  line-height: 100px;
    }
</style>
<script>
export default {
    data: () => ({
	  score:10, //消耗积分
      list:[
	  	{img:'/src/assets/img/j1.png',title:'谢谢参与'},
		{img:'/src/assets/img/j2.png',title:'美女一个'},
		{img:'/src/assets/img/j1.png',title:'宝马一辆'},
		{img:'/src/assets/img/j2.png',title:'单车一辆'},
		{img:'/src/assets/img/j1.png',title:'鸡蛋一蓝'},
		{img:'/src/assets/img/j2.png',title:'500红包'},
		{img:'/src/assets/img/j1.png',title:'靓号一个'},
		{img:'/src/assets/img/j2.png',title:'鲜花一蓝'}
	  ],   //奖品1-9     
      index: -1,  // 当前转动到哪个位置，起点位置
      count: 8,  // 总共有多少个位置
      timer: 0,  // 每次转动定时器
      speed: 200,  // 初始转动速度
      times: 0,    // 转动次数
      cycle: 50,   // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      prize: 4,   // 中奖位置
      click: true,
      showToast: false, //显示中奖弹窗      
      isallow:false
    }),
    	methods:{
		back(){
			this.$router.go(-1);
		},
		startLottery(){
			if (!this.click)  return false;
			this.startRoll(); 
        },		
        draw(){
            this.showToast = false;
            this.click = true;
        },
		// 开始转动
		startRoll () {
			this.click = false; 
			this.times += 1 // 转动次数
			this.oneRoll() // 转动过程调用的每一次转动方法，这里是第一次调用初始化 
			// 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
			if (this.times > this.cycle + 10 && this.prize === this.index) {
			  clearTimeout(this.timer)  // 清除转动定时器，停止转动
			  this.prize = -1
			  this.times = 0
			  this.speed = 200
			  var that = this;
			  setTimeout(res=>{
				that.showToast = true;
			  },500)			                  
			} else {
			  if (this.times < this.cycle) {
				this.speed -= 10  // 加快转动速度
			  } else if (this.times === this.cycle) { 
				//const index = parseInt(Math.random() * 10, 0) || 0;  // 随机获得一个中奖位置
          		this.prize = 1; //中奖位置,可由后台返回 
				if (this.prize > 7) this.prize = 7 
			  } else if (this.times > this.cycle + 10 && ((this.prize === 0 && this.index === 7) || this.prize === this.index + 1)) {
				this.speed += 110
			  } else {
				this.speed += 20
              }      
              
              if (this.speed < 40) this.speed = 40
              
			  this.timer = setTimeout(this.startRoll, this.speed)
			}
		},

		// 每一次转动
		oneRoll () {
		  let index = this.index // 当前转动到哪个位置
		  const count = this.count // 总共有多少个位置
		  index += 1
		  if (index > count - 1) index = 0 
		  this.index = index
		},
	}
}
</script>
